<template>
  <div class="container">
    <!--    搜索条件-->
    <el-form ref="queryForm" :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="租房方式" prop="rentWay">
        <el-select v-model="query.rentWay" placeholder="请选择租房方式" clearable>
          <el-option v-for="item in wayList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="户型" prop="room">
        <el-select v-model="query.room" placeholder="请选择户型" clearable>
          <el-option v-for="item in roomList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="朝向" prop="rentOrientation">
        <el-select v-model="query.rentOrientation" placeholder="请选择楼盘朝向" clearable>
          <el-option v-for="item in rentOrientationList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="租金" prop="rental">
        <el-select v-model="query.rental" placeholder="租金" clearable>
          <el-option v-for="item in priceList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="small" plain @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!--    新增或修改-->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules"  label-width="130px" :inline="true">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="租房名称" prop="rentName">
              <el-input v-model="form.rentName" placeholder="请输入租房名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租房面积" prop="acreage">
              <el-input v-model="form.acreage" placeholder="请输入租房面积" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼盘朝向" prop="rentOrientation">
              <el-select v-model="form.rentOrientation" placeholder="请选择楼盘朝向" clearable>
                <el-option v-for="item in rentOrientationList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护" prop="preserve">
              <el-input v-model="form.preserve" placeholder="上一次维护时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住" prop="occupancy">
              <el-input v-model="form.occupancy" placeholder="入住" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼层" prop="floor">
              <el-input v-model="form.floor" placeholder="楼层" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电梯" prop="elevator">
              <el-input v-model="form.elevator" placeholder="电梯" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车位" prop="carport">
              <el-input v-model="form.carport" placeholder="车位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用水" prop="water">
              <el-input v-model="form.water" placeholder="用水" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用电" prop="electricity">
              <el-input v-model="form.electricity" placeholder="用电" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="燃气" prop="gas">
              <el-input v-model="form.gas" placeholder="燃气" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采暖" prop="heating">
              <el-input v-model="form.heating" placeholder="采暖" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租期" prop="tenancyPeriod">
              <el-input v-model="form.tenancyPeriod" placeholder="租期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="看房日子" prop="showings">
              <el-input v-model="form.showings" placeholder="看房日子" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式" prop="payment">
              <el-select v-model="form.payment" placeholder="请选择付款方式" clearable>
                <el-option v-for="item in payList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租金（ 元 / 月 ）" prop="rental">
              <el-input v-model="form.rental" placeholder="租金" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="押金( 元 )" prop="cashPledge">
              <el-input v-model="form.cashPledge" placeholder="押金" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务费（ 元 ）" prop="serviceFee">
              <el-input v-model="form.serviceFee" placeholder="服务费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中介费（ 元 ）" prop="agencyFee">
              <el-input v-model="form.agencyFee" placeholder="中介费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="纬度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省" prop="pid">
              <el-input v-model="form.pid" placeholder="省" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="市" prop="cid">
              <el-input v-model="form.cid" placeholder="市" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区（县）" prop="aid">
              <el-input v-model="form.aid" placeholder="区（县）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租房方式" prop="rentWay">
              <el-select v-model="form.rentWay" placeholder="请选择租房方式" clearable>
                <el-option v-for="item in wayList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="室(1-9)" prop="room">
              <el-select v-model="form.room" placeholder="室(1-9)" clearable>
                <el-option v-for="item in addRoomList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厅(1-9)" prop="hall">
              <el-select v-model="form.hall" placeholder="厅(1-9)" clearable>
                <el-option v-for="item in hallList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卫（1-9）" prop="toilet">
              <el-select v-model="form.toilet" placeholder="卫(1-9)" clearable>
                <el-option v-for="item in toiletList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装修类型" prop="decorate">
              <el-select v-model="form.decorate" placeholder="请选择装修类型" clearable>
                <el-option v-for="item in decorateList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    新增按钮-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
    </el-row>

    <!--    页面显示数据-->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="rentName" label="租房名称" width="220" />
      <el-table-column prop="acreage" label="租房面积（㎡）" />
      <el-table-column prop="pName" label="省名称" />
      <el-table-column prop="cName" label="市名称" />
      <el-table-column prop="aName" label="区（县）名称" width="120" />
      <el-table-column prop="way" label="租赁方式" />
      <el-table-column prop="cx" label="朝向" />
      <el-table-column prop="room" label="室" />
      <el-table-column prop="rental" label="租金" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" width="120" />
      <el-table-column label="操作" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 画分页条 -->
    <el-pagination
      v-show="total>0"
      :current-page="query.page"
      :page-sizes="[10, 20, 30, 50,100]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// rulesForm
import {
  addHuXingShiData,
  getData,
  rulesForm,
  huXingShiData,
  huXingTingData,
  huXingWeiData,
  priceData,
  editData,
  addData,
  getRent
} from '@/api/rent'
import { getTypelist } from '@/api/data'
import { resetForm } from '@/utils'
export default {
  name: 'Rent',
  data() {
    return {
      total: 0,
      // 初始页面
      tableData: [],
      query: {
        rental: undefined,
        rentWay: undefined,
        room: undefined,
        rentOrientation: undefined,
        page: 1,
        size: 5
      },
      // 对话框标题
      title: '',
      // 表单参数
      form: {},
      // 是否显示对话框
      open: false,
      // 表单验证规则
      rules: rulesForm(),
      // 租房方式 rulesForm()
      wayList: [],
      // 朝向
      rentOrientationList: [],
      // 新增装修类型
      decorateList: [],
      // 新增付款方式
      payList: [],
      // 查询户型（室）
      roomList: huXingShiData(),
      // 新增户型（室）
      addRoomList: addHuXingShiData(),
      // 新增户型（厅）
      hallList: huXingTingData(),
      // 新增户型（卫）
      toiletList: huXingWeiData(),
      // 价格区间
      priceList: priceData()
    }
  },
  created() {
    this.getInfoData()
    this.getDataType()
  },
  methods: {
    // 搜索条件查询按钮
    search() {
      this.query.page = 1
      this.getDataType()
      this.getInfoData()
    },
    // 搜索条件重置按钮
    resetForm() {
      this.$refs['queryForm'].resetFields()
      this.search()
    },
    // 对话框确认按钮
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            editData(this.form).then(resp => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.open = false
              this.getInfoData()
            })
          } else {
            addData(this.form).then(resp => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              console.log(resp)
              this.open = false
              this.getInfoData()
            })
          }
        }
      })
    },
    // 对话框取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {
        id: undefined,
        rentName: undefined,
        acreage: undefined,
        rentOrientation: undefined,
        preserve: undefined,
        occupancy: undefined,
        floor: undefined,
        elevator: undefined,
        carport: undefined,
        water: undefined,
        electricity: undefined,
        gas: undefined,
        heating: undefined,
        tenancyPeriod: undefined,
        showings: undefined,
        phone: undefined,
        payment: undefined,
        rental: undefined,
        cashPledge: undefined,
        serviceFee: undefined,
        agencyFee: undefined,
        longitude: undefined,
        latitude: undefined,
        pid: undefined,
        cid: undefined,
        aid: undefined,
        rentWay: undefined,
        room: undefined,
        hall: undefined,
        toilet: undefined,
        decorate: undefined
      }
      resetForm('queryForm')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.getInfoData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.getInfoData()
    },
    handleAdd() {
      this.open = true
      this.title = '新增租房信息'
      this.reset()
    },
    handleEdit(row) {
      this.open = true
      this.title = '编辑租房信息'
      const rentId = row.id
      getRent(rentId).then(resp => {
        console.log(resp)
        this.form = resp.data
      })
    },
    // 获取表格数据
    getInfoData() {
      getData(this.query).then(resp => {
        this.total = resp.count
        this.tableData = resp.data
      })
    },
    // 获取sys_dict_data表的数据
    getDataType() {
      getTypelist('house_orientation').then(resp => {
        this.rentOrientationList = resp.data
      })
      getTypelist('rent_house_way').then(resp => {
        this.wayList = resp.data
      })
      getTypelist('decorate_type').then(resp => {
        this.decorateList = resp.data
      })
      getTypelist('payment_method').then(resp => {
        this.payList = resp.data
      })
    }
  }
}
</script>

<style scoped>

</style>
